import * as React from 'react';
import {ReactNode} from 'react';
import {DeviceEventEmitter, StyleSheet, Text, View} from 'react-native';
import ToastRootView from "./components/toast/ToastRootView";
import {appInitializer} from "./AppInitializer";
import {NavigationParams, NavigationScreenProp} from "react-navigation";
import NavigatorBar from "./components/navigator/NavigatorFactory";
import NavigatorConfig from "./components/navigator/NavigatorConfig";
import SystemMessagePage from "./page/SystemMessagePage";
import AddRoomModal from "./page/modal/AddRoomModal";
import AddFriendModal from "./page/modal/AddFriendModal";
import {ScreenDimensions} from "./libs/utils/ScreenDimensions";
import ChatWinPage, {ChatRightNavigationBtn} from "./page/ChatWinPage";
import ModifyUserInfoPage from "./page/ModifyUserInfoPage";
import {BroadcastEvent} from "./events/BroadcastEvent";
import {EChatIMSDK} from "./libs/sdk/echatim/core/sdk/EChatIMSDK";
import Toast from "./components/toast/Toast";
import LoginPage from "./page/LoginPage";
import ModifyFriendInfoPage from "./page/ModifyFriendInfoPage";
import ModifyRoomInfoPage from "./page/ModifyRoomInfoPage";
import TabNavigatorComponent from "./components/TabNavigatorComponent";

const styles = StyleSheet.create({
    box: {
        // padding: 10,
        flex: 1,
        backgroundColor:ScreenDimensions.themeBackgroundColor,
        position: 'relative'
    },
    text: {fontWeight: 'bold'}
});

const ClientAppStyle = StyleSheet.create({
    tabItemStyle: {width: 18, height: 18},
    selectedTitleStyle:{color:ScreenDimensions.themeColor}
});

type HomeScreenState = {
    selectedTab: string
};


interface HomeScreenProp extends NavigationParams{
    navigation:NavigationScreenProp<HomeScreenState, HomeScreenProp>
}


class HomeScreen extends React.Component<HomeScreenProp, HomeScreenState> {
    private navigation:NavigationScreenProp<HomeScreenState, HomeScreenProp> | any;
    private im:EChatIMSDK | any;

    constructor(props:HomeScreenProp) {
        super(props);
        // appInitializer.init();
        this.navigation = this.props.navigation;
        NavigatorBar.setRootNavigator(this.props.navigation);
        // 选中 session
        this.state = {
            selectedTab: 'session'
        };
        console.warn = function(msg){};

        DeviceEventEmitter.addListener(BroadcastEvent.EVENT_SDK_INIT, this.onSDKInit.bind(this));
    }

    onSDKInit(im:EChatIMSDK){
        this.im = im;
        this.forceUpdate();
    }
    onDoSDKLogin(auid:string, token:string){
        if(!auid || !token){
            Toast.show('SDK用户账号或密码为空.');
            return;
        }
        appInitializer.init(auid, token);
    }

    renderTabNavigatorContent(): ReactNode {
        return (
            <TabNavigatorComponent selectedTab={'session'}/>
        )
    }

    render(): React.ReactNode {
        // SDK未初始化, 显示登录页
        if(this.im === undefined){
            return (
                <View style={styles.box} nativeID={'client-app'}>
                      <LoginPage onLogin={(auid, token)=>{this.onDoSDKLogin(auid, token)}}/>
                   </View>
            )
        }
        else {
            return (
                   <View style={styles.box} nativeID={'client-app'}>
                      {this.renderTabNavigatorContent()}
                      <ToastRootView/>
                   </View>
            )
        }
    }

}

const DetailScreen = () => (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Detail Screen</Text>
    </View>
);

const stackNavigateRouteConfigMap = {
    // see NavigationStackScreenOptions defined
    // 动态 https://blog.csdn.net/qq_24867873/article/details/78657683
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            headerTitle: '',
            header: null
        }
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: {
            headerTitle: '',
            header: null
        }
    },
    AddFriendModal:{
        screen: AddFriendModal,
        navigationOptions: {
            headerTitle: '添加好友',
        }
    },
    ModifyUserInfoPage:{
        screen: ModifyUserInfoPage,
        navigationOptions: {
            headerTitle: '编辑信息',
        }
    },
    ModifyFriendInfoPage:{
        screen: ModifyFriendInfoPage,
        navigationOptions: {
            headerTitle: '编辑好友信息',
        }
    },
    ModifyRoomInfoPage:{
        screen: ModifyRoomInfoPage,
        navigationOptions: {
            headerTitle: '编辑讨论组信息',
        }
    },
    AddRoomModal:{
        screen: AddRoomModal,
        navigationOptions: {
            headerTitle: '创建讨论组',
        }
    },
    SystemMessagePage:{
        screen: SystemMessagePage,
        navigationOptions: {
            headerTitle: '系统消息',
            header: null
        }
    },
    ChatWinPage:{
        screen: ChatWinPage,
        navigationOptions: ({navigation})=>{

            return {
                headerTitle: '聊天',
                headerStyle:{
                    backgroundColor:'#fff',
                    height: 48,
                },
                headerTitleStyle: {     //导航栏的title的style
                },
                headerRight: (
                    <ChatRightNavigationBtn
                        navigation={navigation}
                    />
                )
            }
        }

    },
};

// 初始化导航器
const NativeClientApp = NavigatorBar.initConfig(null, '', new NavigatorConfig(), stackNavigateRouteConfigMap);

export default NativeClientApp

